<template>
  <div style="margin-top: 5px;">
    <titleBox text="安全预警" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div class="top" style="margin-top: 5px;">
          <div class="top_item" v-for="item in typeList" :key="item.key" @click="changeFxdList(item)">
            <div class="top_item_leftIcon"></div>
            <div class="top_item_name">{{ item.name }}</div>
            <div class="top_item_num">{{ item.num }}</div>
          </div>
        </div>
        <div style="display:flex;justify-content: center; margin:10px 0;">
          <div
            style="background-image:url('/img/myimg/bt2.png'); width:60%; height:20px; background-size: 100% 20px;text-align: center; font-size:12px;">
            巡检记录
          </div>
        </div>
        <mTableAuto v-if="list.length > 4" :titleData="titleData" :valueData="list"></mTableAuto>
        <mTable v-else :titleData="titleData" :valueData="list"></mTable>
        <ylyxModal ref="ylyxModalRef" @rowClick="rowClick"></ylyxModal>
        <rqxqModal ref="rqxqModalRef" @close="rqxqModalClose"></rqxqModal>

      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import mTableAuto from "../mConponents/mTableAuto.vue"
import mTable from "../mConponents/mTable.vue"
import ylyxModal from "../mConponents/modal/ylyxModal.vue"
import rqxqModal from "../mConponents/modal/rqxqModal.vue"
onMounted(() => {
  getData()
  getList()
})
const content = ref(null)
const height = ref(0)
const show = ref(false)
const typeList = ref([
  {
    name: "重大风险",
    key: "zd",
    fxdj: "1",
    num: 0
  },
  {
    name: "较大风险",
    key: "jd",
    fxdj: "2",
    num: 0
  },
  {
    name: "一般风险",
    key: "yb",
    fxdj: "3",
    num: 0
  }
])
const fxdList = ref([])
const getData = async () => {
  const res = await $api.get("/api/V1/getAqyj")
  if (res.code === 1) {
    let ybNum = 0
    let jdNum = 0
    let zdNum = 0
    fxdList.value = res.data
    res.data.forEach(e => {
      if (e.fxdj === "1") {
        zdNum++
      } else if (e.fxdj === "2") {
        jdNum++
      } else if (e.fxdj === "3") {
        ybNum++
      }
    })
    typeList.value.forEach(e => {
      if (e.fxdj === "1") {
        e.num = zdNum
      } else if (e.fxdj === "2") {
        e.num = jdNum
      } else if (e.fxdj === "3") {
        e.num = ybNum
      }
    })
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
    // console.log("Data fetched successfully:", res.data)
    // Process the data as needed
  }
}
const list = ref([])
const total = ref(0)
const getList = async () => {
  const res = await $api.get("/api/v1/getXjjl")
  if (res.code === 1) {
    res.data.data.forEach(e => {
      e.xjr = e.organization.name
    })
    list.value = res.data.data
    total.value = res.data.total
    // Process the data as needed
  }
}

const ylyxModalRef = ref(null)
const ylyxModalShow = () => {
  ylyxModalRef.value.show()
}
const rqxqModalRef = ref(null)
const rqxqModalClose = () => {
  ylyxModalRef.value.show()
}
const rowClick = (e) => {
  rqxqModalRef.value.show(e)
  ylyxModalRef.value.close()
}

const emit = defineEmits(["changeFxd", "changeFxdList"])

const changeFxd = (e) => {
  emit("changeFxd", e)
}

const changeFxdList = (e) => {
  const mlist = []
  fxdList.value.forEach(item => {
    if (item.fxdj === e.fxdj) {
      mlist.push(item)
    }
  })
  emit("changeFxdList", e.key, mlist)
}

const titleData = [
  {
    name: "巡检人",
    key: "xjr",
    style: {
      width: "60px"
    }
  },
  {
    name: "上报内容",
    key: "remark",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "巡检时间",
    key: "month",
    style: {
      width: "80px"
    }
  }
]

</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item {
      flex: 1;
      padding: 3px 10px 3px 3px;
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
      border: 1px solid;
      border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1E6579 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 1);
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 1);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 15px;
        width: 17px;
        height: 15px;
      }
    }
  }
}
</style>
